<!DOCTYPE html>
<head>
	<title>Create Account</title>
	<meta name="keywords" content="聊天室,开源,共享,注册" />
	<meta name="description" content="开源html5聊天室注册页面" />
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
	<link href="css/templatemo_style.css" rel="stylesheet" type="text/css">	
</head>
<body class="templatemo-bg-gray">
	<h1 class="margin-bottom-15">注册用户</h1>
	<div class="container">
		<div class="col-md-12">			
			<form class="form-horizontal templatemo-create-account templatemo-container" role="form" action="#" method="post">
				<div class="form-inner">
					<div class="form-group">
			          <div class="col-md-6">		          	
			            <label for="first_name" class="control-label">姓名</label>
			            <input type="text" class="form-control" id="first_name" placeholder="请输入姓名">		            		            		            
			          </div>  
			               
			        </div>
			        <div class="form-group">
			          <div class="col-md-5">		          	
			            <label for="username" class="control-label">上传图片</label>
			            <input type="file" class="form-control" id="img_url" name="img_url"> 
			            <input type="hidden" id="hidden_img_url" name="hidden_img_url" value=""/>
			          </div> 
			           <div class="col-md-2">		          	
			            <label for="upload_btn" class="control-label">上传</label>
			            <input id="upload_Img" type="button" class="form-control btn btn-info" value="上传"> 
			          </div>             
			          <div class="col-md-5">
			          	<label for="progress" id="progress_label"  class="control-label ">进度条</label> 
						<progress id="progress" max="100" value="0" class="form-control" ></progress>
			          </div>
			        </div>	

			        <div class="form-group">
			          <div class="col-md-6">		          	
			            <label id="username_label" for="username" class="control-label">用户名</label>
			            <input id="username" type="text" class="form-control" name="username"  placeholder="请输入用户名">    	
			         </div>
			          <div class="col-md-6 templatemo-radio-group">
			          	<label class="radio-inline">
		          			<input type="radio"  name="optionsRadios" id="optionsRadios1" value="man"> 男
		          		</label>
		          		<label class="radio-inline">
		          			<input type="radio" name="optionsRadios" id="optionsRadios2" value="woman"> 女
		          		</label>
			          </div>             
			        </div>
			        <div class="form-group">
			          <div class="col-md-6">
			            <label for="password" class="control-label">密码</label>
			          	<input id="password" type="password" class="form-control" name="password"  placeholder="请输入密码">
			          </div>
			          <div class="col-md-6">
			            <label for="password" class="control-label">重复密码</label>
			            <input id="sec_password" type="password" class="form-control" id="password_confirm" placeholder="重复输入密码">
			          </div>
			        </div>
			        <div class="form-group">
			          <div class="col-md-12">
			            <label><input id="service_agree" type="checkbox">我同意该 <a href="javascript:;" data-toggle="modal" data-target="#templatemo_modal">服务</a> 和 <a href="#">条款.</a></label>
			          </div>
			        </div>
			        <div class="form-group">
			          <div class="col-md-12">
			            <input type="submit" value="注册用户" class="btn btn-info">
			            <a href="/webqq-simple/loginshow.servlet" class="pull-right">登录</a>
			          </div>
			        </div>	
				</div>				    	
		      </form>		      
		</div>
	</div>
	<!-- Modal -->
	<div class="modal fade" id="templatemo_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">服务条款</h4>
	      </div>
	      <div class="modal-body">
	      	
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	<script type="text/javascript">
		var ServerName = "http://localhost:8080/webqq-simple/";
	</script>
	<script type="text/javascript" src="jquery/jquery.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/H5Upload.js"></script>
	<script type="text/javascript">
		(function(){
			function validateBlock(etc){
				var validate= new validateBlock.fn.init(etc);
				validate.validate();
				return validate;
			}
			validateBlock.fn =validateBlock.prototype={
					constructor:validateBlock,
					init:function(etc){
						if(typeof etc.name== 'undefined'||etc.name==null||etc.name==''){
							throw "必须要name参数";
						}
						this.flag = false;
						this.message = "";
						this.name = etc.name;
						this.sec_name=etc.sec_name;
						this.type=etc.type||'common';
						this.max = etc.max||20;
						this.min=etc.min||2;
					},
					validate:function(){
						if(this.type == 'common'){
							if(this.validateCommon()){
								this.flag = true;
							}
						}else if(this.type == 'password'){
							if(this.validateCommon()){
								if(this.validatePassword()){
									this.flag = true;	
								}
							}
						}else if(this.type == 'exist'){
							if(this.validateExist()){
								this.flag = true;
							}
						}
					},
					validateCommon:function(){
						var common = document.getElementById(this.name);
						var value = common.value;
						if(value==null||value==''){
							this.message = "不能为空";
							return false;
						}else if(value.length>this.max||value.length<this.min){
							this.message = '范围必须在'+this.min+'~'+this.max+'之间.';
							return  false;
						}else{
							return  true;
						}
					},
					validatePassword:function(){
						if(typeof this.sec_name!='undefined' && this.sec_name!=null){
							var pass = document.getElementById(this.name);
							var value = pass.value;
							var sec_pass = document.getElementById(this.sec_name);
							var sec_value = sec_pass.value;
							if(value == sec_value){
								return true;
							}else{
								return false;
							}
						}
					},
					validateExist:function(){
						var common = document.getElementById(this.name);
						var value = common.value;
						if(value==null||value==''){
							this.message = "error";
							return false;
						}else{
							return true;
						}
					}
			}
			validateBlock.fn.init.prototype= validateBlock.prototype;
			window.validateBlock = validateBlock;
		})();
	</script>
	<script type="text/javascript">

		$(function(){
			var h5=new H5FileUpload();
			$("#upload_Img").click(function(){
				h5.send("img_url");
			})
			$(":submit").click(function(event){
				//首先阻止默认提交事件
				event.preventDefault();
				//查看各个提交模块是否正确 模块的id名和模块的type
				var validate1 = validateBlock({name:'first_name',type:'common'});
				if(!validate1.flag){
					console.log(validate1.message);
					return ;
				}
				var validate2 = validateBlock({name:'password',sec_name:'sec_password',type:'password'});
				if(!validate2.flag){
					console.log('2');
					return ;
				}
				if(!$("#optionsRadios1").prop("checked")&&!$("#optionsRadios2").prop("checked")){
					console.log('3');
					return ;
				}
				var validate3 = validateBlock({name:'username',type:'common'});
				if(!validate3.flag){
					console.log('4');
					return ;
				}
				var validate4 = validateBlock({name:'hidden_img_url',type:'exist'});
				if(!validate4.flag){
					console.log('5');
					return ;
				}
				if(!$("#service_agree").prop("checked")){
					console.log('6');
					return ;
				}
				sendAjax();
			})
			function sendAjax(){
				var data =$("form").serialize();
				console.log(data);
				$.ajax({
					url:'/webqq-simple/register.servlet',
					data:data,
					type:'post',
					success:function(data){
						var data = eval('('+data+')');
						console.log(data);
						if(typeof data.error!='undefined'){
							$("#username_label").html("用户名已经存在");
							$("#username_label").css('color','red');
						}else if(typeof data.sendRedirect!='undefined'){
							$("#username_label").html("用户名");
							$("#username_label").css('color','black');
							window.location.href = data.sendRedirect;
						}
					},
					error:function(xhr,Number){
						
					}
				})
			}
		})
	</script>
</body>
</html>